<template>
    <div class="saleStore">
        <scroller class="scroll" show-scrollbar="false">
            <div class="info-wrapper">
                <IHeader class="header" back="true" title="我的商城"></IHeader>
                <image class="info-bg" :src="imgPath('mystorebg.png')"></image>
                <div class="user-wrapper">
                    <div class="avatar-wrapper">
                        <image class="avatar" :src="storeInfo.headPicture ? storeInfo.headPicture: imgPath('morenlogo.png')"></image>
                    </div>
                    <text class="username">{{storeInfo.name}}</text>
                </div>
            </div>
            <div class="center-wrapper flex_row">
                <div class="task-wrapper">
                    <text class="title border-bottom-cecece">商城订单</text>
                    <div class="task-list flex_row">
                        <div class="taskStep flex_row">
                            <div class="step-item " @click="allOrder(1)">
                                <image class="step-icon" :src="imgPath('daifukuan.png')"></image>
                                <text class="step-word">待付款</text>
                            </div>
                            <div class="line"></div>
                            <div class="step-item" @click="allOrder(2)">
                                <image class="step-icon" :src="imgPath('qufahuo.png')"></image>
                                <text class="step-word">去发货</text>
                            </div>
                            <div class="line"></div>
                            <div class="step-item" @click="allOrder(3)">
                                <image class="step-icon" :src="imgPath('daishouhuo.png')"></image>
                                <text class="step-word">待收货</text>
                            </div>
                            <div class="line"></div>
                            <div class="step-item" @click="allOrder(4)">
                                <image class="step-icon" :src="imgPath('yiwancheng.png')"></image>
                                <text class="step-word">已完成</text>
                            </div>
                        </div>
                        <div class="step-item allOrder" @click="allOrder(0)">
                            <image class="step-icon" :src="imgPath('all_order.png')"></image>
                            <text class="step-word">全部订单</text>
                        </div>
                    </div>
                </div>
                <div class="function-list">
                    <div class="function-item flex_row border-bottom-cecece item_height" @click="pushToGoodGurantee()">
                        <image class="item-icon" :src="imgPath('shangpinguanli.png')"></image>
                        <text class="item-name">商品管理</text>
                        <image class="arrow_right" :src="imgPath('arrow_right.png')"></image>
                    </div>
                    <div class="function-item flex_row border-bottom-cecece item_height" @click="pushToShopGurantee()">
                        <image class="item-icon" :src="imgPath('dianpuguanli.png')"></image>
                        <text class="item-name">店铺管理</text>
                        <image class="arrow_right" :src="imgPath('arrow_right.png')"></image>
                    </div>
                    <div class="function-item flex_row border-bottom-cecece item_height" @click="pushToPreviewGurantee()">
                        <image class="item-icon" :src="imgPath('yunlandianpu.png')"></image>
                        <text class="item-name">预览店铺</text>
                        <image class="arrow_right" :src="imgPath('arrow_right.png')"></image>
                    </div>
                </div>
            </div>
        </scroller>
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
// import NavBottom from '@/components/navBottom'
import Dialog from '@/components/dialog'
import IHeader from '@/components/header'
import {shopInfo} from '@/api/store'
import { WxcLoading } from 'weex-ui'
import Nat from 'natjs'
// const modal = weex.requireModule('modal')

export default {
  name: 'saleStore',
  data () {
    return {
      showDialog: false, // 显示对话框
      shopId: '',
      storeInfo: {},
      needMask: true, // 显示蒙版
      loadingShow: true // loading
    }
  },
  methods: {
    // 商品管理
    pushToGoodGurantee () {
      this.$router.push('/myorder/publishOrder')
    },
    // 店铺管理
    pushToShopGurantee () {
      this.$router.push('/mine/shopGurantee')
    },
    pushToPreviewGurantee () {
      this.$router.push({path: '/store/saleStoreInfo', query: {shopsId: this.shopId}})
    },
    callService () { // 联系客服
      this.showDialog = true
      Nat.call('415-736-0000')
    },
    hideDialog () { // 关闭对话框
      this.showDialog = false
    },
    allOrder (type) {
      this.$router.push({path: '/myorder/saleStoreOrder', query: {type: type}})
    }
  },
  mounted: function () {
    const that = this
    that.loadingShow = true
    that.$api.get(shopInfo, {}, function (res) {
      that.storeInfo = res.data
      that.shopId = res.data.id
      that.loadingShow = false
    }, function () {
      that.loadingShow = false
    }, true)
  },
  components: {
    Dialog,
    IHeader,
    WxcLoading
  }
}
</script>

<style scoped>
    .item_height {
        height: 100px;
        line-height: 100px;
    }
    .border-bottom-cecece {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgb(235,235,235);
    }
    .flex_row {
        flex-direction: row;
    }
    .info-wrapper {
        height: 416px;
    }
    .info-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 750px;
        height: 416px;
    }
    .user-wrapper {
        position: absolute;
        left: 0;
        top: 0;
        width: 750px;
        height: 416px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .avatar-wrapper {
        width: 200px;
        height: 200px;
        margin-top: 110px;
        margin-bottom: 24px;
        padding-left: 4px;
        padding-right: 4px;
        padding-top: 4px;
        padding-bottom: 4px;
        border-width: 1px;
        border-style: solid;
        border-color: #fff;
        background-color: #2b3040;
        border-radius: 100px;
    }
    .avatar {
        width: 190px;
        height: 190px;
        border-radius: 95px;
    }
    .username {
        width: 750px;
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
    }
    .center-wrapper {
        flex-wrap: wrap;
        padding-left: 24px;
        padding-right: 24px;
    }
    .task-wrapper {
        width: 702px;
        margin-top: 24px;
        border-radius: 10px;
        background-color: #fff;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(235,235,235);
        /*box-shadow: 0px 1px 10px 0px rgba(43,48,64,0.12);*/
    }
    .title {
        padding-left: 24px;
        padding-right: 24px;
        font-size: 28px;
        font-weight: bold;
        line-height: 88px;
    }
    .task-list {
        height: 158px;
        padding-left: 40px;
        align-items: center;
        justify-content: space-between;
    }
    .taskStep {
        width: 480px;
        flex-wrap: wrap;
        /*padding-top: 22px;*/
        /*justify-content: space-between;*/
        /*align-items: end*/
    }
    .step-item {
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
    }
    .step-icon {
        width: 68px;
        height: 68px;
    }
    .line {
        width: 60px;
        height: 1px;
        margin-top: 32px;
        background-color: #fecb01;
        margin-left: -8px
    }
    .step-word {
        /*width: 90px;*/
        margin-top: 12px;
        font-size: 26px;
        color: #464646;
    }
    .function-list {
        width: 702px;
        margin-top: 24px;
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 16px;
        padding-bottom: 16px;
        background-color: #fff;
        border-radius: 10px;
       border-width: 1px;
        border-style: solid;
        border-color: rgb(235,235,235);
        min-height: 420px;;
    }
    .function-item {
        align-items: center;
    }
    .item-icon {
        width: 44px;
        height: 44px;
        margin-right: 24px;
    }
    .item-name {
        flex: 1;
        font-size: 28px;
        color: #545c72;
    }
    .arrow_right {
        width: 24px;
        height: 36px;
        margin-left: 24px;
    }
    .allOrder{
        width: 180px;
        justify-content: center;
        align-items: center;
        /*box-shadow: 0px 1px 10px 0px rgba(43,48,64,0.12);*/
        border-left-color:rgb(235,235,235);
        border-left-style: solid;
        border-left-width: 1px;
        background-color: #fff;
    }
    .header{
        background-image: none;
    }
</style>
